<script setup lang="ts">
import { ref } from 'vue'
import { queryUsers } from '@/api/user'
import AdminTable from '@/components/table/index.vue'
import type { Users } from '@/api/interface'
import type { ColumnsInterface } from '@/components/types/table'

// columns
const columns: ColumnsInterface[] = [
    {
        label: '账号',
        prop: 'account',
        align: 'center'
    },
    {
        label: '名称',
        prop: 'nickName',
        align: 'center'
    },

    {
        label: '性别',
        align: 'center',
        slot: true,
        slotTag: 'gender'
    },
    {
        label: '状态',
        align: 'center',
        slot: true,
        slotTag: 'state'
    },
    {
        label: '注册时间',
        prop: 'createdAt',
        align: 'center'
    }
]

// 获取用户列表
const users = ref<Users.QueryUsers>([])
const initialQueryUsers = async () => {
    const result = await queryUsers()
    users.value = result
}
initialQueryUsers()
</script>

<template>
    <div class="user-container base-card">
        <div class="table-container">
            <AdminTable
                :columns="columns"
                :initial="users"
                :is-pagination="false"
                border
                index
            >
                <template #gender="{ scope: { row } }">
                    <span v-if="row.gender === 'male'">男</span>
                    <span v-if="row.gender === 'female'">女</span>
                    <span v-if="row.gender === 'unknown'">未知</span>
                </template>
                <template #state="{ scope: { row } }">
                    <span v-if="row.state === '1'">正常</span>
                    <span v-if="row.state === '2'">异常</span>
                    <span v-if="row.state === '3'">已封禁</span>
                    <span v-if="row.state === '4'">已注销</span>
                </template>
            </AdminTable>
        </div>
    </div>
</template>

<style scoped lang="scss">
.user-container {
    .table-container {
        width: 100%;
        height: 100%;

        // .slot-state-item {
        //     width: 100px;
        //     height: 34px;
        // }
    }
}
</style>
